<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .content{
            background-color: aqua;
            /* 上下padding会撑起来，但是不会占据空间 */
            /* 左右padding是正常的，会占据空间 */
            /* padding: 30px; */

            /* 上下border会撑起来，不会占据空间 */
            border: 50px solid orange;

            /* 上下margin不生效，只有左右会生效 */
            /* margin: 50px; */

        }
    </style>
</head>
<body>
    <!-- 行内非替换元素 设置width，height，margin-top和margin-bottom是不生效的 -->
    <!-- 行内非替换元素设置左右padding的时候，是会占据空间的，但是上下padding虽然会撑起来，但不占据空间 -->
    <!-- 之所以很多东西不生效，是因为W3C怕破坏美感，毕竟span是行内元素 -->
    <span class="content">
        我是span内容，哈哈哈
    </span>
    <div>aaa</div>
</body>
</html>